<template>
  <Wrapper :show-title="false">
    <el-card
      header="普通打印"
      shadow="never"
    >
      <el-button
        type="primary"
        @click="handlePrint"
      >普通打印</el-button>
      <div ref="divRef">

        <div class="item">
          打印内容1
          <icon name="InfoFilled" />
          <p class="no-print">忽略打印</p>
        </div>
        <div style="page-break-after: always" />
        <div class="item">打印内容2</div>
      </div>
    </el-card>

    <el-card
      header="打印创建的DOM结构，适用于远程获取模板后打印"
      shadow="never"
      class="card-box"
    >
      <el-button
        type="primary"
        @click="dynamicPrint"
      >动态打印</el-button>
    </el-card>
  </Wrapper>
</template>

<script setup>
import Print from '@/utils/print'

const divRef = ref(null)

function handlePrint() {
  const el = divRef.value
  if (!el) return
  Print(el)
}

function dynamicPrint() {
  const vnode = '<h2>TITLE</h2><p>动态创建的DOM结构</p>'
  Print(vnode)
}
</script>
